<template>
  <div class="login">
    <img class="logo" src="@/assets/logo.png" width="60" height="60">
    <div class="login-form">
      <h1>
        气井巡井助手
      </h1>
      <p class="avatar">— 高晓宇采气技能大师工作室制作</p>
      <el-card>
        <el-form label-position="top" size="large" :model="formData" :rules="rules" ref="loginForm">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="formData.password" show-password type="password"></el-input>
          </el-form-item>
          <van-button type="primary" :loading="loading" block @click="onSumbit">登 录</van-button>
        </el-form>
      </el-card>
    </div>

  </div>
</template>


<script setup>
import Api from '@/api'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const loading = ref(false);
const formData = ref({
  name: '',
  password: ''
})

const loginForm = ref(null)

const rules = {
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ]
}


const onSumbit = () => {
  loading.value = true;
  loginForm.value.validate(valid => {
    if (valid) {
      Api.login(formData.value).then((res) => {
        console.log(res);
        router.push({
          path: '/'
        })
        loading.value = false;
      }).catch(() => { loading.value = false; })
    } else {
      console.log('error submit!!');
      return false;
    }
  });
}

</script>


<style scoped lang="scss">
.login {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7287e4 0%, #6a72b2 100%);
  position: relative;
  overflow: hidden;
  .logo {
    position: absolute;
    top: 30px;
    left: 30px;
  }
}

.login::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.01));
  top: -150px;
  left: -150px;
}

.login::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  bottom: -100px;
  right: -100px;
}

.login-form {
  width: 85%;
  max-width: 450px;

  h1 {
    text-align: center;
    // color: #eb4025;
        color: #333;
    margin-bottom: 10px;
  }

  .avatar {
    text-align: right;
    // color: #eb4025;
    color: #333;
    font-size: 13px;
    margin-bottom: 30px;
  }
}
</style>